<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="16" :lg="15" :xl="14">
        <el-card>
          <div class="model-data">
            <div class="item">
              <span>总用户</span>
              <div><span class="num">{{ info['userCount'] }}</span><span>人</span></div>
              <router-link to="/user/list">
                <el-button size="mini" type="text">详情</el-button>
              </router-link>
            </div>
            <div class="item">
              <span>总订单</span>
              <div><span class="num">{{ info['orderCount'] }}</span><span>单</span></div>
              <router-link to="/order/list">
                <el-button size="mini" type="text">详情</el-button>
              </router-link>
            </div>
            <div class="item">
              <span>总发票申请</span>
              <div><span class="num">{{ info['invoiceCount'] }}</span><span>笔</span></div>
              <router-link to="/invoice/list">
                <el-button size="mini" type="text">详情</el-button>
              </router-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="8" :lg="7" :xl="6" class="box-login">
        <el-card>
          <div class="model-login">
            <span>上次登录信息</span>
            <div>上次登录时间：{{ info['managerData']['createTime'] }}</div>
            <div>上次登录IP：{{ info['managerData']['loginIp'] }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="16" :lg="15" :xl="14" class="model-msg">
        <el-card>
          <div slot="header">待办</div>
          <div v-for="(item,index) in info['handleData']" :key="index" class="item">
            <div>{{ item.text }}</div>
            <router-link :to="item.url">
              <el-button type="text">查看</el-button>
            </router-link>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="8" :lg="7" :xl="6" class="box-login margin-top-20">
        <el-card>
          <div v-if="info['tcAccountInfo']['balance']" class="model-login" style="height: auto;">
            <span>腾讯云账号状态
              <span type="text" style="float: right;color: #409EFF;cursor: pointer;text-decoration: underline;" @click="toTencentWeb">前往官网</span>
            </span>
            <div>账号余额：{{ info['tcAccountInfo']['balance'] }}元</div>
          </div>
          <div class="model-login margin-top-20">
            <span>系统信息</span>
            <div>系统版本：{{ info['systemData']['mallVersion'] }}</div>
            <div>
              <span>小程序版本：{{ info['systemData']['wxAppVersion'] }}</span>
              <router-link v-if="info['systemData']['wxAppUpdateStatus']" to="/wxApp/publishWxApp">
                <el-link type="primary" style="font-size: 12px;">（有新版本，立即更新）</el-link>
              </router-link>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="16" :lg="15" :xl="14" class="model-msg">
        <el-card class="site-box">
          <el-row>
            <div class="header">服务器脚本</div>
          </el-row>
          <el-row v-for="(item,index) in scriptData" :key="index">
            <el-col :sm="8" :md="7" :lg="6" :xl="4">{{ item['name'] }}</el-col>
            <el-col :sm="16" :md="17" :lg="18" :xl="20" :style="{'color': item.status===1?'rgb(30, 194, 160)': 'red'}">{{ item['statusText'] }}
            <span style="color: #b7b7b7;"> | 最近运行时间: {{ item.execTime }}</span></el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        // 登录信息
        managerData: {},
        // 腾讯云账号信息
        tcAccountInfo: {},
        // 系统信息
        systemData: {},
        // 脚本信息
        scriptData: []
      }
    }
  },
  created() {
    this.loadData();
    this.getScriptData();
  },
  methods: {
    loadData() {
      (async () => {
        const result = await this.$service.applicationGetWorkBenchDetails();
        if (result.code === 0) {
          Object.assign(this.info, result.data || {});
        } else {
          this.$message.error(result.msg || '系统错误');
        }
      })();
    },

    // 获取脚本信息
    getScriptData() {
      (async () => {
        const result = await this.$service.adminSystemGetSystemScriptData();
        if (result.code === 0) {
          this.scriptData = result.data;
        } else {
          this.$message.error(result.msg || '系统错误');
        }
      })();
    },

    // 跳转腾讯官网
    toTencentWeb(){
      window.open('https://cloud.tencent.com/login');
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../styles/index.scss';

  .model-data {
    height: 108px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .item {
      flex: 1;
      padding-left: 6%;
      border-right: 1px solid $gray;

      &:last-child {
        border-right: none;
      }

      span {
        font-size: 14px;
      }

      div {
        margin-top: 16px;

        .num {
          font-size: 26px;
          margin-right: 10px;
        }
      }
    }
  }

  .model-login {
    height: 108px;
    padding: 8px 0 8px 6%;

    span {
      font-size: 14px;
    }

    div {
      margin-top: 26px;
      font-size: 13px;
      color: $textGray;
      span {
        font-size: 13px;
      }
      &:last-child {
        margin-top: 16px;
      }
    }
  }

  @media screen and (max-width: 992px) {
    .box-login {
      margin-top: 20px;
    }
  }

  .model-msg {
    padding-right: 10px;
    margin-top: 20px;

    .item{
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      padding: 0 20px;
      background-color: $gray;
      border-radius: 4px;
      div{
        flex: 1;
      }
    }
  }
  .site-box{
    .el-row {
      .header {
        padding: 6px 20px;
        font-size: 14px;
        font-weight: 600;
        background-color: #f1f2f3;
      }

      border: 1px solid #f1f2f3;
      border-bottom: none;

      &:last-child {
        border-bottom: 1px solid #f1f2f3;
      }

      .el-col {
        padding: 2px 20px;
        font-size: 11px;

        &:last-child {
          border-left: 1px solid #f1f2f3;
        }
      }
    }
  }
</style>

